import React from "react";
import DrawArea from "./components/DrawArea";
import * as styles from "./index.module.scss";
import { getUrlParam } from "./components/Ways";

const oneStrokeData = {
  // 默认的线段颜色与端点颜色
  lineColor: 0xe2e2e2,
  vertexColor: 0x6dc6c0,
  strokeColor: 0x416275,
  activeVertexColor: 0x6dc6c0,
  levels: [
    {
      name: "第1关",
      lineColor: 0xe2e2e2,
      vertexColor: 0x90b34f,
      strokeColor: 0x445624,
      activeVertexColor: 0x90b34f,
      lines: [
        { x1: 375, y1: 366, x2: 200, y2: 916 },
        { x1: 200, y1: 916, x2: 664, y2: 576 },
        { x1: 664, y1: 576, x2: 88, y2: 576 },
        { x1: 88, y1: 576, x2: 556, y2: 916 },
        { x1: 556, y1: 916, x2: 375, y2: 366 },
      ],
    },
    {
      name: "第2关",
      lineColor: 0xe2e2e2,
      vertexColor: 0x6dc6c0,
      strokeColor: 0x416275,
      activeVertexColor: 0x6dc6c0,
      lines: [
        { x1: 240, y1: 460, x2: 654, y2: 875 },
        { x1: 654, y1: 875, x2: 100, y2: 740 },
        { x1: 100, y1: 740, x2: 240, y2: 460 },
        { x1: 240, y1: 460, x2: 515, y2: 460 },
        { x1: 515, y1: 460, x2: 654, y2: 740 },
        { x1: 654, y1: 740, x2: 100, y2: 875 },
        { x1: 100, y1: 875, x2: 515, y2: 460 },
      ],
    },
    {
      name: "第3关",
      lineColor: 0xe2e2e2,
      vertexColor: 0xec6a74,
      strokeColor: 0x914748,
      activeVertexColor: 0xec6a74,
      lines: [
        { x1: 177, y1: 367, x2: 177, y2: 961 },
        { x1: 177, y1: 961, x2: 673, y2: 861 },
        { x1: 673, y1: 861, x2: 177, y2: 367 },
        { x1: 177, y1: 367, x2: 572, y2: 367 },
        { x1: 572, y1: 367, x2: 78, y2: 861 },
        { x1: 78, y1: 861, x2: 572, y2: 961 },
        { x1: 572, y1: 961, x2: 572, y2: 367 },
      ],
    },
  ],
};

const lineWidth = 10, // 线段的厚度
  // lineColor = 0xe2e2e2, // 底图线条颜色
  // activeVertexColor = 0x90b34f, // 激活的端点颜色
  // vertexColor = 0x90b34f, // 底图端点颜色
  // strokeColor = 0x445624, // 绘制中的线段颜色
  vertexRadius = 9; // 底图点的半径

const index = () => {
  // 搜索参数
  const search = Number(
    getUrlParam({
      url: location.href,
      key: "index",
    })
  );

  // 关卡
  const level = JSON.parse(
    JSON.stringify(
      oneStrokeData["levels"]?.[search - 1] || {
        name: "",
        lineColor: 0xe2e2e2,
        vertexColor: 0x6dc6c0,
        strokeColor: 0x416275,
        activeVertexColor: 0x6dc6c0,
        lines: [],
      }
    )
  );

  return (
    <div className={styles.wrapper}>
      {/* 头像、昵称 */}
      <div className={styles.user}>
        <div className={styles.userAvatar}>
          <img src="../../../imgs/avatar.png" alt="" width={56} height={56} />
        </div>
        <div className={styles.userInfo}>
          <div className={styles.userNickName}>一拳超人</div>
          <div className={styles.userSignature}>我变秃了，也变强了</div>
        </div>
      </div>
      {/* 第几关关卡 */}
      <div className={styles.levelNo}>{level.name || ""}</div>
      {/* 一笔画区域 */}
      <DrawArea
        level={level}
        lineWidth={lineWidth}
        vertexRadius={vertexRadius}
        search={search}
      />
    </div>
  );
};

export default index;
